<template>
  <div class="login">
    <div class="body">
      <div class="title">建兴招标标书后台</div>
      <div class="form">
        <el-form label-position="top" :rules="rules" ref="formRules" :model="form.list">
          <el-form-item label="账 号" prop="username">
            <el-input v-model="form.list.username" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="密 码" prop="password">
            <el-input v-model="form.list.password" placeholder="请输入" type="password" />
          </el-form-item>
          <el-form-item label="验证码" class="verify" prop="verify">
            <el-input v-model="form.list.verify" placeholder="请输入" />
            <img :src="verifyUrl" alt="" @click="saveVerify" ref="verify" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login(formRules)" style="width: 100%" :loading="loading"> 登 录 </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="copyright">{{ new Date().getFullYear() }} by 建兴招标</div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useRouter } from 'vue-router';
import { getVerify, check } from "@/api/login";
import { ElMessage } from 'element-plus';
import Cookies from 'js-cookie';
import { useStore } from '@/store';

// 验证码
let verifyUrl = ref(getVerify()),
  verify = ref();

// 更新验证码
function saveVerify() {
  verify.value.src = `${verifyUrl.value}?time=${new Date().getTime()}`;
}

// 表单
let form = reactive({
  list: {},
});

let rules = {
  username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  verify: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
}

let formRules = ref(), router = useRouter(), loading = ref(false);
// 登录
function login(formRules) {
  formRules.validate((valid, fields) => {
    if (valid) {
      let data = form.list;
      loading.value = true;
      check(data).then(res => {
        setTimeout(() => {
          let store = useStore();
          store.user = res.data;
          ElMessage({ type: 'success', message: res.info });
          Cookies.set('token', res.token, { expires: 7 });
          router.push('/');
        }, 300);
      }).catch(() => {
        saveVerify();
      }).finally(() => {
        setTimeout(() => loading.value = false, 300);
      });
    }
  })
}



</script>

<style lang="scss" scoped>
.login {
  position: relative;
  height: 100vh;
  background-color: #265c93;
  background-image: url("@/assets/images/login/bg.png");
  background-size: cover;
  background-position: center;

  .body {
    position: absolute;
    left: 50%;
    margin-left: -225px;
    top: 10%;
    width: 450px;
    padding: 40px;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 3px 6px rgba(56, 65, 74, 0.1);
    border-radius: 3px;
    background-image: url("@/assets/images/login/bg2.png");
    background-size: cover;

    >.title {
      text-align: center;
      font-size: 25px;
      margin-bottom: 40px;
    }

    .form {
      .verify {
        .el-input {
          width: calc(100% - 90px);
        }

        img {
          width: 80px;
          height: 32px;
          margin-left: 10px;
          border-radius: 3px;
          cursor: pointer;
        }
      }
    }
  }

  .copyright {
    position: absolute;
    bottom: 15px;
    color: #fff;
    text-align: center;
    width: 100%;
    font-size: 14px;
  }
}
</style>
